// pages/component/wxxcropper.js
import WeCropper from '../we-cropper/we-cropper.js'
// const WeCropper = require('../we-cropper/we-cropper.js');


const device = wx.getSystemInfoSync()
const width = device.windowWidth
const height = device.windowHeight - 50

Component({
    /**
     * 组件的属性列表
     */
    properties: {
        cropperOpt: {
            type: Object,
            value: {
                id: 'cropper',
                width,
                height,
                scale: 2.5,
                zoom: 8,
                cut: {
                    x: (width - 300) / 2,
                    y: (height - 300) / 2,
                    width: 300,
                    height: 300
                }
            }
        },

    },

    /**
     * 组件的初始数据
     */
    data: {

    },

    /**
     * 组件实例进入页面节点树时执行，注意此时不能调用setData
     */
    created(res) {
        // this.initComDefault();
    },

    /**
     * 组件实例进入页面节点树时执行
     */
    attached(res) {
        this.initComDefault();
    },

    /**
     * 在组件布局完成后执行，此时可以获取节点信息
     */
    ready(res) {

    },

    /**
     * 组件的方法列表
     */
    methods: {

        initComDefault() {
            // const {
            //     cropperOpt
            // } = this.data
            console.log(this.data.cropperOpt)
            new WeCropper(this.data.cropperOpt)
                .on('ready', (ctx) => {})
                .on('beforeImageLoad', (ctx) => {
                    console.log(`current canvas context:`, ctx)
                    wx.showToast({
                        title: '上传中',
                        icon: 'loading',
                        duration: 20000
                    })
                })
                .on('imageLoad', (ctx) => {
                    console.log(`current canvas context:`, ctx)
                    wx.hideToast()
                })
                .on('beforeDraw', (ctx, instance) => {
                    console.log(`current canvas context:`, ctx)
                    console.log(device)
                    console.log(this.data.cropperOpt)
                }).updateCanvas()
        },
        /**
         * 裁剪出图片
         */
        getCropperImage() {
            this.wecropper.getCropperImage((src) => {
                if (src) {
                    console.log(src)
                    wx.previewImage({
                        current: '', // 当前显示图片的http链接
                        urls: [src] // 需要预览的图片http链接列表
                    })
                } else {
                    console.log('获取图片地址失败，请稍后重试')
                }
            })
        },
        /**
         * 上传图片
         */
        uploadTap() {
            let that = this;
            wx.chooseImage({
                count: 1, // 默认9
                sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
                sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
                success(res) {
                    const src = res.tempFilePaths[0]
                    //  获取裁剪图片资源后，给data添加src属性及其值
                    console.log(that)
                    // that.wecropper.pushOrign(src)
                }
            })
        },
    }
})